【設定爆速】VS CodeのRemote Developmentを使ってSSH接続したEC2上のファイルを編集する

めっちゃ簡単にリモートマシン上でVS Codeが使えるRemote Developmentの紹介です。Insider版限定機能ですが、やってみると感動すること請け合いです。

#VSCode（Visual Studio Code）

濱田孝治

2019.05.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

なんとなく試しているけれど、Visual Studio CodeのRemote Development、死ぬほど便利やんけ。とりあえず、~/.ssh/config使ってSSH接続先管理してたら、鬼のように簡単にリモートマシンに接続できる。

— 濱田孝治（ハマコー） (@hamako9999) May 29, 2019

先日、MicrosoftよりRemote Development with VS Codeという衝撃的なアップデートが発表されました。

Remote Development with Visual Studio Code

従来のVS Codeの機能を拡張機能含めてリモートマシン（コンテナやWSLも含む）上で実行してしまう、革命的な機能です。ちょっとやってみましたが、接続設定もむっちゃ簡単でした。

2019年5月現在、Visual Studio Code Insidersという特別版でのみ利用できる機能ですが、まずは実際にさわってみて、その設定の簡単さとリモートマシンでVS Codeが使えることの感動を是非味わってみることをオススメします。

リモートデバッグきたか…!!

　 ( ﾟдﾟ)　ｶﾞﾀｯ
　 /　　 ヾ
＿_L| /￣￣￣/＿
　 ＼/　　　/

VS Code Remote Developmentとは

Visual Studio Code Remote Development

Visual Studio CodeのRemote Developmentは、コンテナやリモートマシンやWSLに対して完全な機能の開発環境を提供します。

より大きく特化したハードウェア環境における開発
ローカルマシンとは環境が完全に切り離されたSandboxの提供
アプリケーションが稼働している顧客環境やクラウド上の環境におけるデバッグの可能化

などのメリットがあり、また、ローカルマシンに特定のソースコードは不要。Remote Developmentを使うことで、コマンドや他の拡張機能をコンテナの中や、WSLやリモートマシン上で、あたかもローカルマシンであるかのように利用することができます。

（上記公式ページより引用）

Remote Developmentの始め方（事前準備）

Remote Development - Visual Studio Marketplace

手元のローカルマシンは、macOS Mojava バージョン 10.14.4を利用。

Visual Studio Remote Developmentを始めるには、上記の拡張機能をインストールする必要があります。ただ、2019年5月30日現在、Visual Studio Code Insidersという限定バージョンでのみ利用できるため、まずはそちらをインストールします。

Visual Studio Code Insidersのインストール

Download Visual Studio Code Insiders

上記サイトより、バイナリをダウンロードしてインストールします。

Remote Development 拡張機能のインストール

インストールしたVisual Studio Code Insidersを起動し、拡張機能検索窓にremote developmentと入力し、インストール。これにより、SSHやContainerやWSLで必要となる全ての拡張機能が一括でインストールされます。

ローカルマシンに必要なコンポーネントのインストール

リモートで利用したいコンポーネントに関連するコンポーネントをローカルマシンにインストールします。

Remote Containers
- Dockerのインストール
Remote SSH
- SSHクライアントのインストール
Remote WSL
- Windows Subsystem for Linuxのインストール

異次元に簡単なリモート環境への接続

いよいよ、リモートマシンへの接続です。

自分は普段使うSSH接続先は、~/.ssh/configに設定しています。その状態で、左側のRemote-SSHアイコンをクリックすると、configファイルに設定された接続先の一覧がこんな感じで表示されます。

または、Shift+Cmd+PでコマンドパレットからRemote-SSH: Connect to Hostを利用することでも同様に接続が可能です。

あとは、接続したいリモート先をクリックすると、別ウィンドウで接続先ユーザーのホームディレクトリが対象となった状態でVisual Studio Codeが起動します！この簡単さには恐れ入りました。

上記は、Amazon Linux2のEC2にec2-userで接続した状態です。

あとは、ファイルの編集に必要なlintやデバッグに必要な拡張機能を自由にインストールし、ローカルマシンとほぼ同じ環境で、Visual Studio Codeを使うことができます！！こんなに簡単だとは思わなかった。もちろんVisual Studio Codeのターミナル機能も利用できるので、リモートマシン上でのコマンド実行もそのままできます。

拡張機能の管理について

VS Codeの拡張機能は、UI/クライアント側とリモートSSHホストの2箇所で管理されます。テーマやスニペットなどUIに関連する拡張機能はローカルにインストールされますが、ほとんどの拡張機能はSSHリモートホスト上にインストールされます。

~/.vscode-remoteに拡張機能はインストールされているようです。このリモートウィンドウ上で、拡張機能をインストールすると、リモートホスト側に拡張機能がインストールされ、それをそのまま利用することができます。

拡張機能一覧でみると、こんな感じでSSHインストールされているものと、ローカルインストールされているものが区別して表示されます。

リモートSSH利用上の主な制約

Developing on Remote Machines using SSH and Visual Studio Code

2019年5月30日時点の主な制約は以下の通り。

キーベース認証を推奨
- 他の認証方法（パスワードベース）等の場合は、こちらを参照（Visual Studio Code Remote Development Troubleshooting Tips and Tricks）
WindowsとMacOSのSSHホスト機能は利用できない（SSHクライアント機能はOK）
Linuxホスト側は/bin/bashと、curl、もしくはwgetが必要
PuTTYは未サポート
SSHホスト上のファイルをドラッグアンドドロップでローカルへコピーできない
SSHホスト側でインストールした拡張機能は、基本的にはローカル側にインストールされる
その他issueはこちらまで　Issues · microsoft/vscode-remote-release